<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>产品列表</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/commons.css" />
<link rel="stylesheet" type="text/css" href="external/fancybox/jquery.fancybox-1.3.4.css" />
<!-- CSS: fancybox -->

<link rel="stylesheet" type="text/css" href="external/nivo-slider/nivo-slider.css" />

</head>
<body>

	<!-- black line from top -->
	<div class="header-blackLine"></div>


	<div class="container">
		<div class="row header">
			<div class="span4">
				<!-- logo -->
				<a href="index708f.html?page=index"> <img class="logo" src="images/header/logo.png" alt=""
					style="width: 207px;" /> </a>
			</div>
			<div class="span8">
				<!-- responsive dropdown menu -->
				<div class="js-jquery-dropdown-wrapper">
					<ul class="js-jquery-dropdown">

						<li><a href="index708f.html?page=index">Home</a></li>

						<!-- submenu -->
						<li class="sub_menu menu-selected"><a href="#">Portofolio
								<div class="sub_menu_arrow"></div> </a>
							<ul>
								<li><a href="index3b26.html?page=page_portofolio_new">Portofolio <span
										class="label label-important">new</span> </a>
									<div class="dropdown-separator"></div></li>
								<li class="menu-selected"><a href="index67bd.html?page=page_portofolio1">1 column</a>
									<div class="dropdown-separator"></div></li>
								<li><a href="index6a41.html?page=page_portofolio2">2 columns</a>
									<div class="dropdown-separator"></div></li>
								<li><a href="indexd6a2.html?page=page_portofolio3">3 columns</a>
									<div class="dropdown-separator"></div></li>
								<li><a href="index558c.html?page=page_portofolio4">4 columns</a>
									<div class="dropdown-separator"></div></li>
								<li><a href="index7187.html?page=page_portofolio_no_photo">Text portofolio</a>
									<div class="dropdown-separator"></div></li>
								<li><a href="index7963.html?page=page_portofolio_project">Project details</a></li>
							</ul></li>

						<li><a href="indexe61e.html?page=page_services">Services</a></li>

						<li><a href="indexfd33.html?page=page_blog">Blog</a></li>



						<!-- submenu -->
						<li class="sub_menu "><a href="#">Features
								<div class="sub_menu_arrow"></div> </a>
							<ul>
								<li><a href="index82ad.html?page=page_about">About</a>
									<div class="dropdown-separator"></div></li>

								<li><a href="index0a3c.html?page=page_typology">Typology</a>
									<div class="dropdown-separator"></div></li>

								<li><a href="indexd46f.html?page=page_pricing_table">Pricing table</a>
									<div class="dropdown-separator"></div></li>

								<li><a href="indexa14d.html?page=page_contact">Contact</a>
									<div class="dropdown-separator"></div></li>

								<li><a href="index39d0.html?page=page_text_columns">Text columns</a></li>




							</ul></li>

					</ul>

				</div>
				<!-- /menu -->
			</div>
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container -->





	<div class="header-barWrapper js-header-animation">



		<div class="container header-bar">
			<div class="row">
				<div class="span9">
					<h3>Portofolio - 1 Column</h3>
					<div class="header-page-description">Our completed works.</div>
				</div>

				<div class="span3 ">
					<div class="header-search">
						<div class="input-append">
							<input class="span2" id="appendedInputButton" size="16" type="text">
							<button class="btn" type="button">
								<i class="icon-search"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<div class="container portofolio-js">

		<div class="row">
			<div class="span12 portofolio-filters">
				<a href="#" class="portofolio-filterSelected" id="portofolio-all">All Works</a> <a href="#"
					id="portofolio-brands">Brand Identity</a> <a href="#" id="portofolio-graphic">Graphic
					Design</a> <a href="#" id="portofolio-photo">Photography</a> <a href="#" id="portofolio-web">Web
					Design</a>
			</div>
		</div>
		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-web">
			<div class="span6">
				<div class="image-wrap">
					<a href="#modal"> <img src="http://blog.karstock.net/serve.do?key=aa9785581d43e86f1bb85e7962330e01" alt="" />
					</a>

				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Fashion photography</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">12 May 2012</a> <a href="#" class="tag">Photoshop</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Archicad</span>
				</div>
				<div class="portofolio-imageGridContent">If you have a location available for shooting, I
					will come with the necessary lighting and equipment. When planning for location fashion
					photography.</div>

				<a href="#" class="black-link">Visit website</a>

			</div>
		</div>




		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-graphic">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_02.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_02.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>
						Architecture photography <span class="label label-inverse">Simple image</span>
					</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">11 May 2012</a> <a href="#" class="tag">Architecture</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Archicad</span>
				</div>
				<div class="portofolio-imageGridContent">Any exterior or interior view of your company
					headquarters or offices is an architecture photograph. In fact, all company presentations will
					feature both exterior and interior images of buildings, offices, shops, factories, depending on
					the company profile.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>




		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-photo">
			<div class="span6">
				<div class="image-wrap">
					<a href="#modal1"> <img src="images/image-shadow/portfolio_2_column_img_03.jpg" alt="" />
					</a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Food studio session</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">10 May 2012</a> <a href="#" class="tag">Food</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Fooder</span>
				</div>
				<div class="portofolio-imageGridContent">His designs communicate a clear point of view
					reflecting a sense of playfulness with sophistication. The balance of traditional elements
					typically through arches, columns, and pediments.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>


		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-brands">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_04.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_04.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Portret video editing</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">10 May 2012</a> <a href="#" class="tag">Food</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Gomera Project</span>
				</div>
				<div class="portofolio-imageGridContent">Food photography have to be done near the chef’s
					kitchen, usually in a restaurant setting, because is very difficult to recreate in a studio all
					the facilities needed for cooking.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>




		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-brands">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_05.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_05.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Architecture in Chicago</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">19 March 2012</a> <a href="#" class="tag">Architecture</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Argon</span>
				</div>
				<div class="portofolio-imageGridContent">The report supports community engagement and
					outreach, investing in the belief that partnerships and collaboration will bring trust and
					understanding to the relationship between planners and the communities that their policies
					affect.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>




		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-graphic">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_06.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_06.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Wedding dress</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">19 March 2012</a> <a href="#" class="tag">Wedding</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Viro</span>
				</div>
				<div class="portofolio-imageGridContent">Vast amount of work in the field of industrial
					design, including furniture, artifacts, jewelry and dinnerware for companies.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>



		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-brands">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_07.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_07.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Vision of pixels</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">15 March 2012</a> <a href="#" class="tag">3d stuff</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Vision Studio</span>
				</div>
				<div class="portofolio-imageGridContent">But I think especially with modern architecture,
					to make a film that really deals with the sense of place and how it changes the way people use
					buildings and are shaped by cities and buildings.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>




		<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-web">
			<div class="span6">
				<div class="image-wrap">
					<a href="images/image-shadow/portfolio_2_column_img_08.jpg"> <img
						src="images/image-shadow/portfolio_2_column_img_08.jpg" alt="" /> </a>
				</div>
			</div>
			<div class="span6 ">

				<div class="portofolio-imageGridTitle">
					<h3>Mass design studio</h3>
				</div>
				<div class="portofolio-projectMeta">
					<a href="#" class="tag">11 March 2012</a> <a href="#" class="tag">Mass</a> <a href="#"
						class="tag">Html</a> <span class="portofolio-for">for Mass Distribution</span>
				</div>
				<div class="portofolio-imageGridContent">They triumphed over the 230 projects from 30
					different countries that competed. We are particularly pleased to see that, this year, young
					and dedicated architectural practices have won the award.</div>
				<a href="#" class="black-link">Visit website</a>
			</div>
		</div>


	</div>




	<!-- The modal windows -->
	<div style="display: none">

		<!-- first modal window ( all links with href="#modal0" will open this window )-->
		<div id="modal" class="fancy-modal">
			<div class="container responsive-center">
				<div class="row">
					<div class="span6">
						<div class="portofolio-imageGridTitle">
							<h3>Fashion photography</h3>
						</div>
						<div class="portofolio-projectMeta">
							<a href="#" class="tag">12 May 2012</a> <a href="#" class="tag">Photoshop</a> <a href="#"
								class="tag">Html</a> <span class="portofolio-for">for Archicad</span>
						</div>
						<div class="portofolio-imageGridContent">If you have a location available for shooting,
							I will come with the necessary lighting and equipment. When planning for location fashion
							photography.</div>

						<div class="portofolio-nav-wrap">
							<div class="portofolio-nav-left"></div>
							<div class="portofolio-nav-right"></div>
						</div>
					</div>
					<div class="span6 aligncenter">
						<img src="images/image-shadow/portfolio_2_column_img_01.jpg" alt="" />
					</div>
				</div>
			</div>
		</div>

		<!-- second modal window ( all links with href="#modal1" will open this window )-->
		<div id="modal1" class="fancy-modal">
			<div class="container responsive-center">
				<div class="row">
					<div class="span6">
						<div class="portofolio-imageGridTitle">
							<h3>Food studio session</h3>
						</div>
						<div class="portofolio-projectMeta">
							<a href="#" class="tag">12 May 2012</a> <a href="#" class="tag">Photoshop</a> <a href="#"
								class="tag">Html</a> <span class="portofolio-for">for Archicad</span>
						</div>
						<div class="portofolio-imageGridContent">If you have a location available for shooting,
							I will come with the necessary lighting and equipment. When planning for location fashion
							photography.</div>



						<div class="portofolio-nav-wrap">
							<div class="portofolio-nav-left"></div>
							<div class="portofolio-nav-right"></div>
						</div>
					</div>
					<div class="span6">
						<img src="images/image-shadow/portfolio_2_column_img_03.jpg" alt="" />
					</div>
				</div>
			</div>
		</div>

	</div>

	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="span6">
					<span class="footer-company">&copy; tagDiv</span> Avenue 17, New York 51242, USA
				</div>
				<div class="span6">
					<div class="footer-right">
						<span class="footer-company">office@tagdiv.com</span> +407.742.145.555
						<div class="footer-social">
							<a href="#"><img src="images/icons/content-ico-linked.png" alt="" /> </a> <a href="#"><img
								src="images/icons/content-ico-flickr.png" alt="" /> </a> <a href="#"><img
								src="images/icons/content-ico-vimeo.png" alt="" /> </a> <a href="#"><img
								src="images/icons/content-ico-twitter.png" alt="" /> </a> <a href="#"><img
								src="images/icons/content-ico-facebook.png" alt="" /> </a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<!-- jQuery -->
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="external/jquery-ui-1.8.21.custom.min.js"></script>
	<!-- JS: effects core + fold and clip -->

	<!-- external stuff -->
	<script type="text/javascript" src="js/custom.js"></script>
	<!-- JS: Our script :) -->
	<script type="text/javascript" src="external/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<!-- JS: fancybox - modal image-->
	<script type="text/javascript" src="external/fx.js"></script>
	<!-- JS: jquery fx used for the bar animation -->
	<script type="text/javascript" src="external/jquery.nicescroll.min.js"></script>
	<!-- JS: nicescroll - the nice scrolling bar from index -->
	<script type="text/javascript" src="external/jquery.masonry.min.js"></script>
	<!-- JS: masonry - portofolio new tile script -->


	<script type="text/javascript" src="external/nivo-slider/jquery.nivo.slider.pack.js"></script>
	<script type="text/javascript" src="external/jquery.bxSlider/jquery.easing.1.3.js"></script>
	<!-- bx Slider -->
	<script type="text/javascript" src="external/jquery.bxSlider/jquery.bxSlider.min.js"></script>
	<!-- bx Slider -->
	<!-- JS: nivo slider -->
</body>
</html>
